<template>
	<view class="">
		<view class="bgban u-p-30 u-m-b-30 u-p-b-30" :style="{ backgroundImage: `url(${shopData.headImage})`
}">
			<view class="combox bg-white u-p-20">
				<view class="c-000 u-font-19">
					{{shopData.shopName || ''}}
				</view>
				<view class="u-flex u-flex-between u-m-t-20">
					<view>
						<view class="u-m-t-10">
							<text
								class="bg-gradual-purple u-p-10 u-font-21 c-fff b-r-10">{{shopData.cateName|| ''}}</text>
						</view>
						<view class="u-m-t-20">
							已售：{{shopData.totalSales|| ''}}
						</view>
					</view>
					<view class="text-center">
						<image src="../../static/images/share.png" mode="" class="u-wd-25 u-he-25"></image>
						<view>
							分享
						</view>
					</view>
				</view>
				<!-- 商家照片 -->
				<view class="u-flex u-flex-between u-m-t-20">
					<image :src="item.url" mode="" class="u-m-r-15" style="height: 200rpx;width: 33%;"
						v-for="(item,index) in headImages" :key="index"></image>
				</view>
				<view class="u-m-t-20 c-000 f-w">
					营业时间：周一至周日 {{shopData.businessHours|| ''}}
				</view>
				<view class="u-flex u-m-t-30  u-flex-between u-flex-y-center">
					<view class="c-333 u-font-32 u-flex u-flex-y-center u-wdd-80">
						<image src="../../static/images/dingwei.png" mode="" class="u-wd-20 u-he-15  u-m-r-15"></image>
						{{shopData.address || ''}} <!-- <text class="c-999">(0KM)</text> -->
					</view>
					<view @click="onPhone()">
						<image src="../../static/images/phone.png" mode="" class="u-wd-20 u-he-25"></image>
						<view>
							电话
						</view>
					</view>
				</view>
			</view>
			<view class="">
				<view class="cu-bar">
					<view class="action">
						<text class="u-font-16 text-bold c-000">店铺商品</text>
					</view>
				</view>
				<view class="combox u-p-t-0 u-p-l-0 u-p-r-0 u-p-b-20" style="background-color: transparent;">
					<view class="good-list ">
						<view :id="'good'+good.id" class="good-li bg-white u-m-b-15 bg-white b-r-10"
							v-for="good in shopDataList" :key="good.id" @click="handbuy(good)">
							<image class="good-img" :src="good.goodsImage" mode="widthFix" />
							<view class="flex-item relative">
								<view class="u-line-1  c-000">{{good.goodsName}}</view>
								<view class="u-font-21 u-m-t-10 u-m-b-10">{{good.useTime}}</view>
								<view class="good-price f-w u-flex  u-flex-y-center u-flex-between  u-m-t-10">
									<view>
										<text class="u-font-21 ">¥</text>{{good.merchantPrice}}
										<!-- <text class="u-m-l-15"  style="border: 1px solid red;padding: 2px 5px;">
											抵¥4.0
										</text> -->
									</view>
									<view class="bg-gradual-orange b-r-20" style="padding: 5px 10px;">
										抢购
									</view>
								</view>
								<view class=" u-flex u-flex-between u-flex-y-center">
									<view class="good-sold">
										¥{{good.marketPrice}}
									</view>
									<view>
										销量:{{good.salesCount + good.virtualSalesCount}}
									</view>
								</view>
							</view>
						</view>
						<view class="text-center" v-if="shopDataList.length == 0">
							<image src="https://www.mescroll.com/img/mescroll-empty.png" mode=""
								class="u-wd-170 u-he-170"></image>
							<view>暂无数据</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				shopDataList: [],
				shopData: {},
				headImages: [],
				merchantId: '',
			}
		},
		onLoad(opt) {
			this.merchantId = opt.id
			console.log(this.merchantId)
		},
		onShow() {
			this.getmerchantInfo()
		},
		methods: {
			onPhone() {
				uni.makePhoneCall({
					phoneNumber: this.shopData.contactsTel
				});
			},
			// 获取当前店铺的详情
			getmerchantInfo() {
				this.$api.merchantInfoApi({
					merchantShopId: this.merchantId
				}).then(res => {
					this.shopData = res.data;
					this.headImages = res.data.headImages
					this.getGoodsList()
				})
			},
			// 获取当前店铺的商品
			getGoodsList() {
				this.$api.getGoodsListApi({
					merchantId: this.shopData.merchantId
				}).then(res => {
					this.shopDataList = res.data;
				})
			},
			// handDetails() {
			// 	this.$emit('handDetails')
			// },
			handbuy(item) {
				console.log(item);
				uni.$u.route('/pages/local/buy', {
					id: item.id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bgban {

		background-size: 10 0% 100%;
		height: 400rpx;
		width: 100%;
	}

	.good-list {
		.good-li {
			display: flex;
			align-items: center;
			padding: 20upx;
			border-bottom: 1upx solid #eee;

			.good-img {
				width: 160upx;
				height: 160upx;
				margin-right: 20rpx;

			}

			.flex-item {
				flex: 1;



				.good-price {
					font-size: 26upx;
					color: red;
				}

				.good-sold {
					font-size: 24upx;
					color: gray;
					text-decoration: line-through;
				}

			}
		}
	}
</style>